<template>
    <div class="travel">
        <div>
            <!-- 整体页面 -->
            <div class="div_1">
                <template>
                    <!-- 导航栏 -->
                    <el-menu  default-active="/travel" router class="el-menu-demo" mode="horizontal" @select="handleSelect"  >
                        <el-menu-item index="/"><i class="el-icon-s-home"></i></el-menu-item>
                        <el-menu-item >目的地攻略</el-menu-item>
                        <el-menu-item index="/travel">游记</el-menu-item>
                        <el-menu-item >问答</el-menu-item>
                        <el-menu-item >当地向导</el-menu-item>
                        <el-menu-item index="/MyHomePage">我的主页</el-menu-item>
                    </el-menu>
                </template> 
                <div class="div_2">
                    <!-- 面包屑--快速回到指定页面 -->
                    <div style="margin-top:30px;">
                    <el-breadcrumb separator=">">
                            <el-breadcrumb-item :to="{ path: '/' }">旅游攻略社区</el-breadcrumb-item>
                            <el-breadcrumb-item><a href="/">游记</a></el-breadcrumb-item>
                            <el-breadcrumb-item>写游记</el-breadcrumb-item>
                    </el-breadcrumb>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'travel',
     data() {
      return {

      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    },
}
</script>

<style scoped>
.div_1{
    margin:0 auto;
    width:1600px;
    height:800px;
}
.div_2{
    width:1600px;
    height:700px;
    background-color: gainsboro;
}
</style>